﻿<#import "../../_layout.ftl" as layout>
${Html.s("pagetitle","流程审批")}
<@layout._layout>
<script src="/content/gojs/1.8.13/go-debug.js"></script>
<style>
.main{
	margin:5px;
}
</style>
<input type="hidden" id="formvariables" name="formvariables" />
<div class="head">
    <div id="title" class="title">
        
    </div>
</div>
<div class="main">
    <ul class="mydetail"> 
         <li>
            <label>任务流程信息</label>
            <div style="text-align:left;width: 98%;">
                <table id="tb-info" class="mytable mleft flowinfo"  width="100%">
                    <tbody>
                        <tr>
                            <td>当前节点:</td><td><span id="taskFlowApproveNode"></span></td>
                            <td>当前审批人:</td><td><span id="taskFlowApproveBy"></span></td>
                            <td>任务状态:</td><td><span id="taskTaskState"></span></td>
                            <td>任务更新时间:</td><td><span id="taskUpdateTime"></span></td>
                        </tr>
                        <tr>
                            <td>流程节点:</td><td><span id="flowApproveNode"></span></td>
                            <td>流程发起人:</td><td><span id="flowCreateBy"></span></td>
                            <td>流程状态:</td><td><span id="flowFlowState"></span></td>
                            <td>流程创建时间:</td><td><span id="flowCreateTime"></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </li>      
        <li>
            <label>审批内容:</label> <input type="hidden" id="hdvariables"/>
            <iframe id="content" style="border:1px solid #ccc;width:98%"></iframe>
        </li>        
        <li>
            <label>审批记录</label>
            <table id="tb-nodes" class="mytable" width="98%">
                <tr>
                    <th style="width:5%">审批节点</th>
                    <th style="width:10%">审批人</th>
                    <th style="width:10%">审批结果</th>
                    <th style="width:10%">审批备注</th>
                    <th style="width:10%">审批时间</th>
                </tr>              
            </table>
        </li>     
        <li>
            <label>审批操作</label>
            <div class="mleft">
            <form id="approveForm" name="approveForm" action="#">
                <textarea id="remark" name="remark" rows="5" cols="2" ></textarea>
            </form>
                <div style="margin-top: 10px;">
                	<input class="btn1" style="margin-left: 2px;" type="button" onclick="save('同意')" value="同意">
                  	<input class="btn1" style="margin-left: 2px;" type="button" onclick="save('不同意')" value="不同意">
               		<input class="btn1" style="margin-left: 2px;" type="button" onclick="save('转交')" value="转交">
                </div>
            </div>
        </li>
        <li>
            <label>审批流程</label>
             <div id="myDiagramDiv" class="mleft" style="width:50%; height: 500px; background-color: #DAE4E4;"></div>
        </li>        
    </ul>
</div>
<script src="/content/js/flow.js"></script>
<script type="text/javascript">
	//获取url中的参数
    function getUrlParam(name) {
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
	$(document).ready(function(){
		$.ajax({
			url:"task_detail",
			type:"POST",
			dataType:"json",
			data:{
				taskid:getUrlParam("taskid"),
				userNo:${user.userno}
			},
			success:function(data){
				$("#title").html("流程审批："+ data.data.flow.title);
				$("#content").attr("srcdoc",data.data.model.pcForm);
				$("#hdvariables").val(JSON.stringify(data.data.variables));
				showHistory(data.data.approvelogs);
				showTask(data.data.task);
				showFlow(data.data.flow);
				showDraw(data.data);
			},
			error:function(){
			}			
		});
	});

	function save(action)
    {
        if(action == "转交"){
            $("#dialogTransfer").dialog({
                // bgiframe: true,
                resizable: true, //是否可以重置大小
                height: 150, //高度
                width: 250, //宽度
                draggable: false, //是否可以拖动。
                title: "转交用户工号",
                modal: true,
                open: function (e) {  //打开的时候触发的事件
                },
                close: function () { //关闭Dialog时候触发的事件

                }

            });
        }
        else{
            //approve
          var fromdata = new Array(); 
			$("#content input,select,textarea").each(function(index){
				var input=new Object();			
				input.id=$(this).attr('id');
				input.name=$(this).attr('name');
				input.key=$(this).attr('name');
			    input.value=$(this).val();
			    input.type=$(this).attr('type');
			    input.hidden=$(this).attr('hidden');
			    if (input.type=='textarea'){
	                  input.value=$(this).text();
	              }else if (input.type=='combobox'){
	                  input.value=$(this).combobox('getValue');
	              }else if (input.type=='checkbox'){
	                  if ($(this).is(':checked')) 
							input.value=input.attr('xtext');
	              }else if (input.type!='button'){
		              input.value=$(this).val(); 
	              }	     		
				fromdata.push(input);
			
			});			
            $.post("/user/flow/approve",
                    {  "taskid":getUrlParam("taskid"),
                        "approveResult":action,
                        "remark":$("#remark").val(),
                        "variablesJson": JSON.stringify(fromdata),
                        userNo:${user.userno}
                    },
                    function(data){
                        if(data.code>0){
                           alert("审批成功");
                            window.location = 'undo_list';
                        }else{
                            alert("转交出错:"+data.message);
                        }
                    }, "json");
        }
    }
    function getuser() {
        $.post("/user/flow/getuser",
                { "userno":$('#transferuser').val()
                },
                function(data){
                    if(data.code>0){
                        $('#userinfo').html(data.data);
                    }else{
                        $('#userinfo').html("");
                        alert(data.message);
                    }
                }, "json");
    }

    function dotransfer() {
        $.post("/user/flow/transfer",
                {
                    "taskId":getUrlParam("taskid"),
                    "transferUserNo":$('#transferuser').val()
                },
                function(data){
                    if(data.code>0){
                       alert("转交成功");
                       window.location = '/user/flow/undo_list';
                    }else{
                        alert("转交出错:"+data.message);
                    }
                }, "json");

    }
	function fillFormContent(list)
	{		
		if(list!=null&&list!='undefined'){
			var variables=JSON.parse(list);
			for(var k in variables)
			{	
				if($("#content").contents().find("#"+variables[k].key).length>0)
				{
					if(variables[k].permit=="write"){
						$("#content").contents().find("#"+variables[k].key).val(variables[k].value).removeAttr("disabled");
					} else  if(variables[k].permit=="hide") {
						$("#content").contents().find("#"+variables[k].key).val(variables[k].value).hide();
					} else {
						$("#content").contents().find("#"+variables[k].key).val(variables[k].value).attr("disabled","disabled");
					}
				}
				else
				{
					if(variables[k].permit=="write"){
						$("#content").contents().find("form").append("<label>"+variables[k].desc+"</label><input type=\"text\" id=\""+variables[k].key+"\"  value=\""+variables[k].value+"\"  /><br/>");
					} else {
						$("#content").contents().find("form").append("<input type=\"hidden\" id=\""+variables[k].key+"\"  value=\""+variables[k].value+"\"  />");
					} 
				}				
			}	
		}	
	}
	function showHistory(list)
	{
		//$("#tb-nodes").empty();
		while(list.length>0){
			var flowlog=list.pop();
			$("#tb-nodes").append("<tr><td>"+ flowlog.node+"</td><td>"+ flowlog.userBy+"</td><td>"+ flowlog.result+"</td><td>"+ flowlog.remark+"</td><td>"+ flowlog.updateTime+"</td></tr>");			
		}
	}
	function showTask(task)
	{
		$("#taskFlowApproveNode").html(task.flowApproveNode);
		$("#taskFlowApproveBy").html(task.flowApproveBy+"("+task.flowApproveUserno+")");
		var state=""
		if(task.taskState==1) {
			state="处理中";			
		} else if(task.taskState==2) {
			state="已关闭";		
		}else if(task.taskState==3) {
			state="已完成";		
		}
		$("#taskTaskState").html(state);
		$("#taskUpdateTime").html(task.updateTime);
	}
	function showFlow(flow)
	{
		$("#flowApproveNode").html(flow.approveNode);
		$("#flowCreateBy").html(flow.createBy+"("+flow.createUserno+")");		
		var state="";
		if(flow.flowState==1) {
			state="未提交";			
		} else if(flow.flowState==2) {
			state="处理中";		
		}else if(flow.flowState==3) {
			state="已完成";		
		}else if(flow.flowState==4) {
			state="已完毕";		
		}else if(flow.flowState==5) {
			state="异常，请联系管理员";	
		}
		$("#flowFlowState").html(state);
		$("#dvFlowState").html(state);
		$("#flowCreateTime").html(flow.createTime);
	}
	
	function showDraw(data)
	{
	    var model = paint(go.GraphLinksModel);	 
	    model.nodeDataArray =JSON.parse(data.parintNodes);	  
	    model.linkDataArray =JSON.parse(data.parintLinks);
	    myDiagram.model = model;
	}
	function show_detail(){
		fillFormContent($("#hdvariables").val());
	}
</script>
<#--转交-->
<div style="display:none;overflow:hidden;padding:3px" id="dialogTransfer">
    <span>工号:</span><input class="text midtext" style="width: 100px" type="text" id="transferuser" name="transferuser" value="" /><input class="btn1" style="margin-left: 5px" type="button" onclick="getuser()" value="查找">
    <div id="userinfo" style="text-align: center"></div>
    <div style="text-align: center;margin-top: 10px;"><input class="btn1" type="button" onclick="dotransfer()" value="确认转交"></div>
</div>
</@layout._layout>